<template>
  <t-image-viewer v-if="!store.isMobileType" v-model:visible="ImgVisible" :images="[urls + props.info.value]">
  </t-image-viewer>
  <van-image-preview :show-index="false" v-else v-model:show="ImgVisible" :images="[urls + props.info.value]">
  </van-image-preview>
  <div class="outline-parent">
    <img
      v-if="props.info.value"
      class="outline-cover"
      :src="urls + props.info.value + '?imageView2/3/w/420/h/420/format/webp'"
      alt=""
    />
    <div class="outline-cover-null" v-else></div>
    <!-- @click="ImgVisible = true" -->
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style1',
});
</script>

<script setup lang="ts">
import videoview from './../../../videoDialog/videoview.vue';
import { publicUrls, textType } from '@/utils/minxin';
import textMode from '../../../textMode/textMode.vue';
import { urls } from '@/utils/request/upload';
import { defineComponent, onMounted, ref, watch } from 'vue';
import TextMax from '@/freeComponents/textMode/TextMax.vue';
import { useProjectStore } from '@/store';

const ImgVisible = ref(false);
const visible = ref(false);
const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  domShow: {
    type: Boolean,
  },
});

const audioRef = ref(null);
const audioFlag = ref(false);

const audioplay = () => {
  if (audioRef.value.paused) {
    audioRef.value.play();

    audioFlag.value = true;
  } else {
    audioRef.value.pause();
    audioFlag.value = false;
  }
};

watch(
  () => store.videoInfoShow,
  (val) => {
    if (val) {
      if (audioRef.value) {
        audioRef.value.pause();
        audioFlag.value = false;
      }
    }
  },
);
</script>

<style scoped lang="less">
.outline-parent {
  position: relative;
  // -webkit-box-reflect: below 60% linear-gradient(transparent, rgba(0, 0, 0, 0.15));
}
.outline-parent {
  display: flex;
  // width: 420px;
  // height: 420px;
margin-top: 78px;
  object-fit: contain;
}
.outline-cover {
  max-width: 800px; 
  max-height: 800px; 
  // min-height: 420px;
  width: auto;
  height: auto;
  
  object-fit: contain; 
}
.outline-cover-null{
  width: 100px;
  height: 100px;
}
</style>
